<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<!-- 
		CSS盒模型（Box Model）是网页设计中的一个基本概念，它将每个HTML元素视为一个矩形盒子，以简化网页布局和排版。盒模型主要由以下四个部分组成：1

		内容(Content)。盒模型的内部部分，包含实际的HTML内容，如文本、图片等。
		内边距(Padding)。内容与边框之间的空间，用于添加到盒子内部的填充，可以通过CSS的padding属性设置。
		边框(Border)。包围内容和内边距的线条或规则，可以通过CSS的border属性设置，包括边框的宽度、样式和颜色。
		外边距(Margin)。盒子与其他元素之间的空间，用于控制元素之间的间距，可以通过CSS的margin属性设置。
		盒模型还涉及两种基本的盒模型模式：

		标准盒模型(content-box)。在这种情况下，元素的总宽度和总高度分别由内容区域的宽度和高度决定。这是CSS盒模型的默认模式。2
		怪异盒模型或IE盒模型(border-box)。在此模式下，元素的宽度和高度包括内容、内边距、边框和外边距。这是Internet Explorer使用的模式，也称为怪异模式。
		理解盒模型的概念对于创建有效和一致的网页布局至关重要。通过调整内容、内边距、边框和外边距，开发者可以精确控制HTML元素在网页上的表现和位置
	 -->
	 <style>
		 .box{
			 width: 100px;
			 height: 100px;
			 border: 1px solid;
			 margin-top: 100px;
			 margin-left: 100px;
			 padding-left: 30px;
			 padding-top: 30px;
			 /* box-sizing:border-box; */
			 /* margin | padding  简写属性   一个值 代表上右下左  两个值 上下和左右  三个值 上 左右  下  四个值 上右下左 */
			/* border 复合属性  
				border-width:  **px  
				border-style: dotted(点线) | dashed(虚线) | double(双线)
				border-color:red | rgba() | #000000*/
		 }
		 /* 外边距合并 */
		 
	 </style>
	<div class="box">
		<span>内容</span>
	</div>
</body>
</html>